<template>
  <div class="listSearch-container">
    <div class="search-group">
      <img class="search-logo" src="../../assets/img/logo.png" alt="">
      <van-search v-model="query.keyword" show-action shape="round" background="#000" placeholder="搜索研讨会">
        <template #action>
          <div @click="onRefresh" class="search-button"><van-icon name="search" color="#888" size=".36rem" /></div>
        </template>
      </van-search>
    </div>
    <van-pull-refresh :disabled="refreshDisabled" v-model="isLoading" @refresh="onRefresh" pulling-text="加载中..." loosing-text="加载中..." loading-text="loading">
      <div class="list-group" ref="scrollbars" @scroll="scrollbarTop">
        <van-list loading-text="加载中" v-model="loading" :finished="finished" :finished-text="listData.length > 0 ? '没有更多了' : ''" @load="initAjaxMethod">
          <div class="list-grid-group">
            <div class="match-grid-content" v-for="(val, key) in listData" :key="key" @click="goToDetail(val)">
              <div class="match-grid-box">
                <div class="content-grid-img-group">
                  <img :src="baseUrl+val.thumb" class="content-grid-img">
                </div>
                <div class="detail-grid-mobile">
                  <div class="detail-grid-title ellipsis-multiline1">{{val.name}}</div>
                  <div class="detail-grid-infos">
                    <span class="detail-info-grid-price"><em>¥{{val.rebuymoney}}元起 ></em></span>
                    <!-- <span class="detail-info-grid-text">查看详情</span> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
        <empty v-if="listData.length == 0"></empty>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { getdate } from "@/utils/utils";
import { PullRefresh, List, Toast, Icon, Tag ,Image,Search} from 'vant';
export default {
  name: "match",
  components: {
    [PullRefresh.name]: PullRefresh, [List.name]: List, 
    [Icon.name]: Icon, [Tag.name]: Tag,
    [Image.name]: Image,[Search.name]: Search,
  },
  data() {
    return {
      refreshDisabled: false,
      loading: false,
      finished: true,
      isLoading: false,
      menuId: 3,
      baseUrl: this.$API.ASSET_IMAGES_URL,
      query: {
        pageIndex: 1,
        pageSize: 10,
        sid: '',
        keyword:''
      },
      total: 0,
      listData: [],

    };
  },
  filters: {
    dateFrom(e) {
      if (!e) return '';
      return getdate(e);
    }
  },
  mounted() {
    this.query.keyword = this.$route.query.keyword;
    this.initAjaxMethod();
  },
  methods: {
    onSearch(){
      this.onRefresh();
    },
    scrollbarTop(e) {
      this.scrollTop = e.target.scrollTop;
      if (this.scrollTop > 100) {
        this.refreshDisabled = true;
      } else {
        this.refreshDisabled = false;
      }
    },
    onRefresh() {
      this.isLoading = true;
      this.query.pageIndex = 1;
      this.query.keyword = '';
      this.listData = [];
      this.finished = false;
      this.loading = true;
      this.$refs['scrollbars'].scrollTop = 0;
      this.initAjaxMethod();
    },
    goToDetail(data) {
      this.$router.push({path:'/curriculumDetail',query:{id:data.id}});
    },
    //列表加载
    initAjaxMethod() {
      Toast.loading({ message: "加载中...", forbidClick: true });
      this.$http
        .post(this.$API.GET_CURRICULUM_LIST,this.query)
        .then((res) => {
          Toast.clear();
          if (res.code == 1) {
            let list = Array.isArray(res.data.list) ? res.data.list : [];
            let isOver = list.length < this.query.pageSize ? true : false;
            this.finished = isOver;
            this.loading = false;
            this.isLoading = false;
            this.listData = this.query.pageIndex == 1 ? list : [...this.listData, ...list];
            this.total = res.data.total;
            if (!isOver) {
              this.query.pageIndex++;
            }
          }
        });
    }
  },
};
</script>

<style lang="less">
.listSearch-container {
  height: 100;
  .search-group {
    display: flex;
    align-items: center;
    background: #000;
    .search-logo{
      height: 0.5rem;
    }
    .van-search {
      padding:0 0 0 0.2rem;
      flex:1;
      .van-cell {
        font-size: 0.24rem;
        line-height: 0.3rem;
      }
      .van-field__left-icon .van-icon {
        font-size: 0.3rem;
      }
    }
    .search-button {
      font-size: 0.3rem;
      padding: 0.1rem 0.04rem 0 0.04rem;
      color: #333;
    }
  }
  .list-grid-group {
    padding: 0 0.1rem 0.1rem 0.1rem;
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    .match-grid-content {
      width: 48%;
      margin: 2% 2% 0% 0%;
      padding: 1.5%;
      border: 1px solid #eee;

      // width: 50%;
      // padding: 0.1rem;
    }
    .match-grid-box {

   
      // border-radius: 0.2rem 0.2rem 0 0;
      background: #fff;
      // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    }
    .content-grid-img-group {
      width: 100%;
      height: 1.8rem;
      background: #fff;
      overflow: hidden;
      // border-radius: 0.2rem 0.2rem 0 0;
      .content-grid-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .detail-grid-mobile {
      padding: 0.2rem 0.1rem;
    }
    .detail-grid-title {
      font-size: 0.3rem;
      color: #333;
      line-height: 0.4rem;
    }
    .detail-grid-infos {
      padding-top: 0.16rem;
      font-size: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .detail-info-grid-price {
        // font-size: 0.24rem;
        color: #3e3a39;
        em {
          font-size: 0.28rem;
          margin-right: 3px;


          font-style: normal;
          // font-size: 0.3rem;
          padding: 0 0.06rem;
          color: #E4A357;
        }
      }
      .detail-info-grid-text {
        font-size: 0.22rem;
        color: #3e3a39;
        padding: 0.08rem 0.2rem;
        background: #ff6857;
        color: #fff;
        border-radius: 0.3rem;
      }
    }
  }
}
</style>
